<template>
  <div class="index" id="index">
    <!-- 根标签 div -->

    <!-- 顶部导航栏 -->
    <div
      v-show="scroll >= 90"
      class="index_header"
      style="
        line-height: 4.6rem;
        text-align: center;
        font-size: 1.6rem;
        position: fixed;
        top: 0;
        background-color: white;
        width: 100%;
        z-index: 1000;
        transition: 0.5s;
      "
    >
      宠物派
    </div>
    <!-- 顶部导航栏  结束-->
    <!-- 头部背景  小人  logo -->
    <div class="toubu">
      <img src="../assets/img/logo.png" style="width: 7rem" alt="" />
    </div>
    <!-- 头部背景结束 -->

    <!-- 上门喂猫 狗 -->
    <div class="shangmen">
      <div class="weimao">
        <img src="../assets/img/cat_index.png" alt="" />
        <span>上门喂猫</span>
      </div>
      <div class="liugou">
        <img src="../assets/img/dog_index.png" alt="" />
        <span>上门遛狗</span>
      </div>
    </div>
    <!-- 上门喂猫 狗 结束 -->

    <!-- 累计服务 -->
    <div class="fuwu">
      <div class="fuwu_left"><img src="../assets/img/fuwu.png" alt="" /></div>
      <div class="fuwu_right">
        <div>
          <span>已累计服务宠物</span>
          <span>21,239</span>
          <span>截止2022.05</span>
        </div>
      </div>
    </div>
    <!-- 累计服务 结束 -->

    <!-- 伴宠日记   查看全部-->
    <div class="daily">
      <span>伴宠日记</span>
      <span><router-link :to="{ path: '/dailylist' }"> 查看全部 ▶</router-link> </span>
    </div>
    <!-- 伴宠日记   查看全部 结束-->

    <!-- 日记卡片 -->
    <daily-card></daily-card>
    <!-- 日记卡片 结束 -->
    <!-- 点击按钮 跳转日记列表页 -->
    <div class="go_dailys">
      <router-link :to="{ path: '/dailylist' }"> 查看更多伴宠日记></router-link>
    </div>
    <!-- 点击按钮 跳转日记列表页 -->

    <!-- 根标签div 结束 -->
  </div>
</template>

<script>
import DailyCard from '@/components/DailyCard.vue';

export default {
  components: { DailyCard },
  computed: {},

  data() {
    return {
      scroll: '',
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    // 监听滚动条事件,显示头部标题
    handleScroll() {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.scroll);
    },
  },
  //销毁,否则跳到别的路由还是会出现
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  background-color: white;
  width: 37.5rem;
  // 头部
  .toubu {
    width: 100%;
    height: 22rem;
    background-image: url('../assets/img/girl.png');
    background-size: 8rem;
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-color: #fde062;
    img {
      position: absolute;
      top: 10rem;
      left: 2rem;
    }
  }
  //服务
  .fuwu {
    width: 100%;
    height: 22rem;
    display: flex;
    .fuwu_left {
      width: 50%;
      img {
        width: 6rem;
        padding-left: 10rem;
        padding-top: 11rem;
      }
    }
    .fuwu_right {
      width: 50%;
      padding-top: 10.5rem;
      span {
        display: block;
        margin: 1rem;
        font-size: 1.6rem;
        color: grey;
      }
      span:nth-child(2) {
        font-size: 2.4rem;
        color: red;
        font-family: '华光彩云_cnki';
      }
    }
  }
  //伴宠日记
  .daily {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    span {
      display: block;
      line-height: 5rem;
    }
    span:first-child {
      font-weight: bold;
      font-size: 2.5rem;
      color: #36343c;
      text-align: start;
      padding-left: 2rem;
    }
    span:last-child {
      font-size: 1.4rem;
      color: gray;
      text-align: end;
      padding-right: 2rem;
    }
  }
  //上门喂猫遛狗
  .shangmen {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: white;
    position: absolute;
    left: 1.75rem;
    top: 18rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 90%;
    height: 13rem;
    border-radius: 1.5rem;
    .weimao,
    .liugou {
      width: 50%;
      height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        color: #36343c;
      }
      img {
        display: block;
        width: 6rem;
        margin-bottom: 1rem;
      }
    }
    .weimao {
      border-right: 0.05rem solid lightgrey;
    }
  }
  //底部跳转文字
  .go_dailys {
    text-align: center;
    margin-bottom: 2rem;
  }
}
</style>
